<!-- 设施概要 -->
<template>
  <div class="facility-summary">
    <div class="header">
      <span style="margin-right: 8px; color: #707070;">智慧公厕:</span>
      <PostSelector v-model:facility-id="facilityId" />
    </div>
    <div v-if="facilityId">
      <div class="content-one">
        <div class="content-one-left">
          <div class="post-real-time">
            <div>驿站实时监控</div>
            <img width="100%" style="margin-top: 16px" src="@/assets/imgs/real-time-icon.png" alt=""/>
            <div style="display: flex; justify-content: space-between; margin-top: 12px; align-items: center;">
              <div style="display: flex; align-items: center;">
                <div style="width: 12px; height: 12px; background-color: #15CCA7; border-radius: 50%;"></div>
                <div style="margin-left: 8px; font-size: 15px; color: #697A8D;">空闲</div>
              </div>
              <div style="display: flex; align-items: center;">
                <div style="width: 12px; height: 12px; background-color: #FF684F; border-radius: 50%;"></div>
                <div style="margin-left: 8px; font-size: 15px; color: #697A8D;">占用</div>
              </div>
              <div style="display: flex; align-items: center;">
                <div style="width: 12px; height: 12px; background-color: #FFAB00; border-radius: 50%;"></div>
                <div style="margin-left: 8px; font-size: 15px; color: #697A8D;">告警</div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="environment-and-gases-real-time">
            <div>驿站环境和气体监控</div>
            <div style="display: flex; flex-direction: column; margin-top: 16px;">
              <div style="display: flex; align-items: center; padding: 12px; margin-bottom: 8px; background-color: #F5F5F9; border-radius: 8px;">
                <img src="@/assets/imgs/temp-icon.png" width="44px" height="44px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 12px;">
                  <div style="font-size: 15px; color: #697A8D;">温度</div>
                  <div style="font-size: 18px; color: #566A7F;">{{ tempValue }}℃</div>
                </div>
              </div>
              <div style="display: flex; align-items: center; padding: 12px; margin-bottom: 8px; background-color: #F5F5F9; border-radius: 8px;">
                <img src="@/assets/imgs/hum-icon.png" width="44px" height="44px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 12px;">
                  <div style="font-size: 15px; color: #697A8D;">湿度</div>
                  <div style="font-size: 18px; color: #566A7F;">{{ humValue }}%</div>
                </div>
              </div>
              <div style="display: flex; align-items: center; padding: 12px; margin-bottom: 8px; background-color: #F5F5F9; border-radius: 8px;">
                <img src="@/assets/imgs/pm25-icon.png" width="44px" height="44px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 8px;">
                  <div style="font-size: 15px; color: #697A8D;">PM2.5</div>
                  <div style="font-size: 18px; color: #566A7F;">{{ PMValue }}ug/m³</div>
                </div>
              </div>
              <div style="display: flex; align-items: center; padding: 12px; margin-bottom: 8px; background-color: #F5F5F9; border-radius: 8px;">
                <img src="@/assets/imgs/nh3-icon.png" width="44px" height="44px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 8px;">
                  <div style="font-size: 15px; color: #697A8D;">氨气</div>
                  <div style="font-size: 18px; color: #566A7F;">{{ HZSValue }}PPM</div>
                </div>
              </div>
              <div style="display: flex; align-items: center; padding: 12px; background-color: #F5F5F9; border-radius: 8px;">
                <img src="@/assets/imgs/h2s-icon.png" width="44px" height="44px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 8px;">
                  <div style="font-size: 15px; color: #697A8D;">硫化氢</div>
                  <div style="font-size: 18px; color: #566A7F;">{{ NHValue }}PPM</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-one-right">
          <div>现场环境</div>
          <el-select style="margin-top: 12px;" placeholder="大厅（对电视墙）"/>
          <div style="display: flex; align-items: center; width: 100%; height: 158px; margin-top: 40px; font-size: 15px; color: #fff; background-color: #000; border-radius: 8px;">
            <div style="margin: 0 auto; text-align: center">
              <div>无信号</div>
              <div>Zero signal</div>
            </div>
          </div>
          <div style="display: flex; margin-top: 12px;">
            <div style="flex: 1; display: flex; align-items: center; height: 100px; margin-right: 12px; font-size: 15px; color: #fff; background-color: #000; border-radius: 8px;">
              <div style="margin: 0 auto; text-align: center">
                <div>无信号</div>
                <div>Zero signal</div>
              </div>
            </div>
            <div style="flex: 1; display: flex; align-items: center; height: 100px; font-size: 15px; color: #fff; background-color: #000; border-radius: 8px;">
              <div style="margin: 0 auto; text-align: center">
                <div>无信号</div>
                <div>Zero signal</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-two">
        <div class="content-two-left">
          <div style="display: flex; justify-content: space-between">
            <div style="flex: 1; padding: 20px; margin-right: 12px; background-color: #fff; border-radius: 8px;">
              <div style="display: flex; align-items: center;">
                <img src="@/assets/imgs/use-count.png" width="42px" height="42px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 12px;">
                  <div style="font-size: 18px; color: #697A8D;">使用人数</div>
                  <div style="font-size: 15px; color: #707070;">当日: <span style="font-size: 22px; color: #71DD37;">12</span></div>
                </div>
              </div>
              <div style="display: flex; margin-top: 36px; justify-content: space-around;">
                <div style="font-size: 15px; color: #707070;">
                  <div>昨日</div>
                  <div>12</div>
                </div>
                <div style="font-size: 15px; color: #707070;">
                  <div>累计</div>
                  <div>12</div>
                </div>
              </div>
            </div>
            <div style="flex: 1; padding: 20px; margin-right: 12px; background-color: #fff; border-radius: 8px;">
              <div style="display: flex; align-items: center;">
                <img src="@/assets/imgs/power-consumption.png" width="42px" height="42px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 12px;">
                  <div style="font-size: 18px; color: #697A8D;">耗电量(KW-h)</div>
                  <div style="font-size: 15px; color: #707070;">当日: <span style="font-size: 22px; color: #696CFF;">12</span></div>
                </div>
              </div>
              <div style="display: flex; margin-top: 36px; justify-content: space-around;">
                <div style="font-size: 15px; color: #707070;">
                  <div>昨日</div>
                  <div>12</div>
                </div>
                <div style="font-size: 15px; color: #707070;">
                  <div>累计</div>
                  <div>12</div>
                </div>
              </div>
            </div>
            <div style="flex: 1; padding: 20px; background-color: #fff; border-radius: 8px;">
              <div style="display: flex; align-items: center;">
                <img src="@/assets/imgs/water-consumption.png" width="42px" height="42px" style="border-radius: 4px;" alt=""/>
                <div style="margin-left: 12px;">
                  <div style="font-size: 18px; color: #697A8D;">耗水量（L）</div>
                  <div style="font-size: 15px; color: #707070;">当日: <span style="font-size: 22px; color: #03C3EC;">12</span></div>
                </div>
              </div>
              <div style="display: flex; margin-top: 36px; justify-content: space-around;">
                <div style="font-size: 15px; color: #707070;">
                  <div>昨日</div>
                  <div>12</div>
                </div>
                <div style="font-size: 15px; color: #707070;">
                  <div>累计</div>
                  <div>12</div>
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex; justify-content: space-between; margin-top: 16px;">
            <div style="flex: 1; padding: 20px; margin-right: 16px; background-color: #fff; border-radius: 8px;">
              <div style="display: flex; align-items: center;">
                <img src="@/assets/imgs/abnormal-count.png" width="42px" height="42px" style="border-radius: 6px;" alt=""/>
                <div style="margin-left: 12px;">
                  <div style="font-size: 18px; color: #697A8D;">异常数量</div>
                  <div style="font-size: 15px; color: #707070;">当日: <span style="font-size: 22px; color: #FF3E1D">12</span></div>
                </div>
              </div>
              <div style="display: flex; margin-top: 36px; justify-content: space-around;">
                <div style="font-size: 15px; color: #707070;">
                  <div>昨日</div>
                  <div>12</div>
                </div>
                <div style="font-size: 15px; color: #707070;">
                  <div>累计</div>
                  <div>12</div>
                </div>
              </div>
            </div>
            <div style="flex: 1; padding: 20px; background-color: #fff; border-radius: 8px;">
              <div style="display: flex; align-items: center;">
                <img src="@/assets/imgs/alarm-count.png" width="42px" height="42px" style="border-radius: 6px;" alt=""/>
                <div style="margin-left: 12px;">
                  <div style="font-size: 18px; color: #697A8D;">告警数量</div>
                  <div style="font-size: 15px; color: #707070;">当日: <span style="font-size: 22px; color: #FFAB00">12</span></div>
                </div>
              </div>
              <div style="display: flex; margin-top: 36px; justify-content: space-around;">
                <div style="font-size: 15px; color: #707070;">
                  <div>昨日</div>
                  <div>12</div>
                </div>
                <div style="font-size: 15px; color: #707070;">
                  <div>累计</div>
                  <div>12</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-two-right">
          <div>设备状态</div>
          <DeviceStatusEcharts />
          <div>设备监控</div>
          <div style="display: flex; flex-wrap: wrap; margin-top: 4px; ">
            <img src="@/assets/imgs/device-status-1.png" width="58px" height="58px" style="margin: 8px 6px 0 0;" alt=""/>
            <img src="@/assets/imgs/device-status-2.png" width="58px" height="58px" style="margin: 8px 6px 0 0;" alt=""/>
            <img src="@/assets/imgs/device-status-3.png" width="58px" height="58px" style="margin: 8px 6px 0 0;" alt=""/>
            <img src="@/assets/imgs/device-status-4.png" width="58px" height="58px" style="margin: 8px 6px 0 0;" alt=""/>
            <img src="@/assets/imgs/device-status-5.png" width="58px" height="58px" style="margin: 8px 6px 0 0;" alt=""/>
            <img src="@/assets/imgs/device-status-6.png" width="58px" height="58px" style="margin: 8px 6px 0 0;" alt=""/>
            <img src="@/assets/imgs/device-status-7.png" width="58px" height="58px" style="margin: 8px 6px 0 0;" alt=""/>
          </div>
        </div>
      </div>
      <div class="attr-echarts">
        <!-- 湿度 -->
        <div class="attr-echarts-item" style="margin: 0 16px 16px 0;">
          <HumEcharts :facilityId="facilityId" />
        </div>
        <!-- 氨气 -->
        <div class="attr-echarts-item" style="margin-bottom: 16px;">
          <NHEcharts :facilityId="facilityId" />
        </div>
        <!-- 温度 -->
        <div class="attr-echarts-item" style="margin-right: 16px;">
          <TempEcharts :facilityId="facilityId" />
        </div>
        <!-- 硫化氢 -->
        <div class="attr-echarts-item">
          <HZSEcharts :facilityId="facilityId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HumEcharts from './com/HumEcharts.vue'
import PostSelector from './com/PostSelector.vue';
import NHEcharts from './com/NHEcharts.vue';
import TempEcharts from './com/TempEcharts.vue';
import HZSEcharts from './com/HZSEcharts.vue';
import DeviceStatusEcharts from './com/DeviceStatusEcharts.vue';
import { getFacilityAttrInfo } from '@/api/yz/facility-summary/index.ts'
import dayjs from 'dayjs'

const facilityId = ref()

const currentDate = ref(dayjs(new Date()).format('YYYY-MM-DD'))

watch(()=>facilityId.value,
() => {
  loadTempAttrValue()
  loadHumAttrValue()
  loadPMAttrValue()
  loadHZSAttrValue()
  loadNHAttrValue()
})

// 温度属性值
const tempValue = ref()
// 湿度
const humValue = ref()
// PM2.5
const PMValue = ref()
// 硫化氢
const HZSValue = ref()
// 氨气
const NHValue = ref()

// 加载温度属性值
const loadTempAttrValue = async() => {
  try {
    const params = {
      date: currentDate.value,
      facilityId: facilityId.value,
      key: 'temp'
    }
    const res = await getFacilityAttrInfo(params)
    tempValue.value = res.value || 0
  } catch (error) {
    console.log(error)
  }
}
// 加载湿度属性值
const loadHumAttrValue = async() => {
  try {
    const params = {
      date: currentDate.value,
      facilityId: facilityId.value,
      key: 'hum'
    }
    const res = await getFacilityAttrInfo(params)
    humValue.value = res.value || 0
  } catch (error) {
    console.log(error)
  }
}
// 加载pm2.5属性值
const loadPMAttrValue = async() => {
  try {
    const params = {
      date: currentDate.value,
      facilityId: facilityId.value,
      key: 'pm25'
    }
    const res = await getFacilityAttrInfo(params)
    PMValue.value = res.value || 0
  } catch (error) {
    console.log(error)
  }
}
// 加载硫化氢属性值
const loadHZSAttrValue = async() => {
  try {
    const params = {
      date: currentDate.value,
      facilityId: facilityId.value,
      key: 'h2s'
    }
    const res = await getFacilityAttrInfo(params)
    HZSValue.value = res.value || 0
  } catch (error) {
    console.log(error)
  }
}
// 加载氨气属性值
const loadNHAttrValue = async() => {
  try {
    const params = {
      date: currentDate.value,
      facilityId: facilityId.value,
      key: 'nh3'
    }
    const res = await getFacilityAttrInfo(params)
    NHValue.value = res.value || 0
  } catch (error) {
    console.log(error)
  }
}
</script>

<style scoped lang="scss">
.facility-summary {
  
  .header {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
  }

  .content-one {
    display: flex;
    margin-top: 24px;

    .content-one-left {
      display: flex;
      padding-bottom: 16px;
      justify-content: space-between;
      flex: 5;
      background-color: #fff;
      border-radius: 8px;

      .post-real-time {
        padding: 16px 24px 0;
        flex: 3;
      }

      .line {
        border-right: 1px solid #ECEEF1;
      }

      .environment-and-gases-real-time {
        padding: 16px 24px 0;
        flex: 2;
      }
    }

    .content-one-right {
      padding: 16px 24px;
      margin-left: 24px;
      flex: 2;
      background-color: #fff;
      border-radius: 8px;
    }
  }

  .content-two {
    display: flex;
    margin-top: 24px;

    .content-two-left {
      flex: 5;
      margin-right: 24px;
    }

    .content-two-right {
      padding: 16px 24px;
      flex: 2;
      background-color: #fff;
      border-radius: 8px;
    }
  }

  .attr-echarts {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;

    .attr-echarts-item {
      width: calc((100% - 112px)/2);
      padding: 16px 24px;
      background-color: #fff;
      border-radius: 8px;
    }
  }
}
</style>